<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #cvs {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <canvas id="cvs" width="500" height="500"></canvas>
  <script>
    let cvs = document.getElementById("cvs");
    let cxt = cvs.getContext("2d");
    let radian = 2 * Math.PI;
  
    (function play() {
      // 获取当前时间
      let date = new Date(); 
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      cxt.save();
      cxt.translate(cvs.width / 2, cvs.height / 2); 
      cxt.clearRect(-(cvs.width / 2), -(cvs.height / 2), cvs.width, cvs.height);
      createhourCode(cxt);
      createScale(cxt, "minute");
      createScale(cxt);
      createWtachHand(cxt, "second", {hour, minute, second});
      createWtachHand(cxt, "minute", {hour, minute, second});
      createWtachHand(cxt, "hour", {hour, minute, second});
      createDialPhate(cxt);
      cxt.restore();
      requestAnimationFrame(play);
    })()

    function createDialPhate(cxt) {
      cxt.beginPath();
      cxt.save();
      cxt.lineWidth = 8;
      cxt.strokeStyle = "#454545";
      cxt.arc(0, 0, 240, 0, radian);
      cxt.stroke();
      cxt.beginPath();
      cxt.arc(0, 0, 8, 0, radian);
      cxt.fillStyle = "#fff";
      cxt.lineWidth = 4;  
      cxt.fill();
      cxt.stroke();
      cxt.restore()
    }

    function createScale(cxt, unit = "hour") {
      let scaleNum = 12, strokeS = "#464646", lineW = 6, y1 = -230, y2 = -205;
      if (unit === "minute") {
        scaleNum = 60;
        lineW = 2;
        y2 = -215;
        strokeS = "blue"
      }
      cxt.beginPath();
      cxt.lineWidth = lineW;
      cxt.strokeStyle = strokeS;
      for (let i = 0; i < scaleNum; i++) {
        cxt.save();
        cxt.rotate((radian / scaleNum) * i)
        cxt.moveTo(0, y1);
        cxt.lineTo(0, y2);
        cxt.stroke();
        cxt.restore()
      }
    }

    function createWtachHand(cxt, unit, time) {
      let y1 = -140, y2 = 15, lineW = 6, strokeS = "#123456";
      let rV = radian / 12 * time.hour;
      let rVRem = (time.minute / 60) * (radian / 12);
      if (unit === "minute") {
        y1 = -165;
        y2 = 20;
        lineW = 4;
        rV = radian / 60 * time.minute;
        rVRem = (time.second / 60) * (radian / 60);
        strokeS = "green"
      }
      if (unit === "second") {
        y1 = -190;
        y2 = 25;
        lineW = 2;
        rV = radian / 60 * time.second;
        rVRem = 0;
        strokeS = "red"
      }
      cxt.beginPath();
      cxt.lineWidth = lineW;
      cxt.strokeStyle = strokeS;
      cxt.save();
      cxt.rotate(rV + rVRem);
      cxt.moveTo(0, y1);
      cxt.lineTo(0, y2);
      cxt.stroke();
      cxt.restore()
    }

    function createhourCode(cxt) {
      cxt.beginPath();
      cxt.textAlign = "center";
      cxt.textBaseline = "middle";
      cxt.font = "bold 18px 黑体";
      for (let i = 1; i <= 12; i++) {
        cxt.save();
        cxt.fillText(i, -(Math.sin(radian / 12 * i)) * -190, -(Math.cos(radian / 12 * i) * -(-190)))
        cxt.restore()
      }
    }
  </script>
</body>
</html>